<template>
  <div class="flex flex-col h-full">
    <div class="flex justify-center mt-2 mb-2">
      <a-radio-group v-model:value="tabActive" button-style="solid" @change="radioChange">
        <a-radio-button :value="0">转入手术区</a-radio-button>
        <a-radio-button :value="1">转出手术区</a-radio-button>
      </a-radio-group>
    </div>
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" layout="inline" :model="formState" :label-col="{ style: { width: '75px' } }">
        <a-form-item name="pyjm" label="">
          <a-input v-model:value="formState.pyjm" class="w-56 ml-2" placeholder="姓名/助记码/卡号/住院号" />
        </a-form-item>
        <a-form-item name="" label="手术日期">
          <a-date-picker v-model:value="formState.dateRange" class="w-42" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <TransferIn v-if="tabActive === 0" :value="tableData" :pagination="pagination" :loading="loading" @refresh="getData" />
      <TransferOut v-else :value="tableData" :pagination="pagination" :loading="loading" @refresh="getData" />
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import SearchContainer from '@/components/SearchContainer'
import TransferIn from './transfer-in'
import TransferOut from './transfer-out'

const tabActive = ref(0)
const formRef = ref(null)
const formState = ref({
  pyjm: '',
  dateRange: dayjs().format('YYYY-MM-DD')
})
const { loading, tableData, getData, pagination } = useTable({
  url: 'oprOperation/opr/getOperationAppointmentList',
  immediate: true,
  formatParams: () => {
    return {
      pyjm: formState.value.pyjm,
      statuss: tabActive.value === 0 ? ['1', '3'] : ['5', '6'],
      stdate: formState.value.dateRange,
      eddate: formState.value.dateRange
    }
  }
})
const radioChange = () => {
  formState.value.pyjm = ''
  formState.value.dateRange = dayjs().format('YYYY-MM-DD')
  getData()
}
</script>

<style lang="" scoped></style>
